<template>
	<view class="confirm-order">
		<view class="confirm-order-voucher">
			<u-image v-if="voucherData.goodsimg" :src="voucherData.goodsimg" mode="" width="120rpx" height="120rpx"
				border-radius="12"></u-image>
			<u-image v-else src="@/static/image/logo.png" mode="" width="120rpx" height="120rpx"
				border-radius="12"></u-image>
			<view class="confirm-order-voucher-text">
				{{voucherData.goodsname}}
			</view>
		</view>
		<view class="confirm-order-address">
			<view class="home-address">
				<view class="select-item select-item-send" @click="selectAddress(1)">
					<view class="select-icon select-icon-send">
						取
					</view>
					<view class="select-text">
						<view class="select-text-title">
							{{sendTitle}}
						</view>
						<view class="select-text-desc">
							{{sendDesc}}
						</view>
					</view>
					<u-icon name="arrow-right" size="30rpx" color="#999"></u-icon>
				</view>
				<view class="select-item select-item-recive" @click="selectAddress(2)">
					<view class="select-icon select-icon-recive">
						送
					</view>
					<view class="select-text">
						<view class="select-text-title">
							{{reciveTitle}}
						</view>
						<view class="select-text-desc">
							{{reciveDesc}}
						</view>
					</view>
					<u-icon name="arrow-right" size="30rpx" color="#999"></u-icon>
				</view>
			</view>
		</view>

		<view class="confirm-order-time">
			<view class="confirm-order-time-title">
				预约上门时间
			</view>
			<view class="confirm-order-time-desc" @click="selectDate">
				<view class="" style="margin-right: 10rpx;">
					{{orderInfo.takePreTime || '请选择上门时间'}}
				</view>
				<u-icon name="arrow-right" size="30rpx" color="#999"></u-icon>
			</view>
		</view>

		<view class="confirm-order-footer" @click="confirmHandle">
			立即预约
		</view>
		<SelectAddressList ref="selectAddressListRef" @confirm="confirmAddress" />
		<SelectDate ref="selectDateRef" @confirm="dateConfirm" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import SelectAddressList from '@/pages/index/components/select-address-list.vue'
	import SelectDate from '@/pages/index/components/select-date.vue'

	export default {
		data() {
			return {
				orderInfo: {
					backAddress: '',
					backCity: '',
					backCounty: '',
					backMan: '',
					backPhone: '',
					backProvince: '',
					deliveryNumber: '',
					supplyFree: 0,
					takeAddress: '',
					takeCity: '',
					takeCounty: '',
					takeMan: '',
					takePhone: '',
					takePreTime: "",
					takePreTimeStart: '',
					takePreTimeEnd: '',
					takeProvince: '',
					voucherCode: ''
				},
				voucherid: '',
				voucherData: {},
				takeData: {
					regionName: '',
					phone: '',
					man: ''
				}
			}
		},
		components: {
			SelectAddressList,
			SelectDate
		},

		computed: {
			sendTitle() {
				const {
					takeCounty,
					takeCity,
					takeProvince,
					takeAddress
				} = this.orderInfo
				return takeAddress ? `${takeProvince}${takeCity}${takeCounty}${takeAddress}` : '去哪儿取'
			},
			sendDesc() {
				const {
					takePhone,
					takeMan
				} = this.orderInfo
				return takeMan ? `${takeMan} ${takePhone}` : '快递员去哪里取衣送洗'
			},
			reciveTitle() {
				const {
					backAddress,
					backCity,
					backProvince,
					backCounty
				} = this.orderInfo
				return backAddress ? `${backProvince}${backCity}${backCounty}${backAddress}` : '送回哪儿'
			},
			reciveDesc() {
				const {
					backPhone,
					backMan
				} = this.orderInfo
				return backMan ? `${backMan} ${backPhone}` :
					'快递员去哪里取衣送洗'
			},
			canSubmit() {
				return this.orderInfo.takePhone && this.orderInfo.backPhone
			}
		},

		onLoad(option) {
			this.voucherid = option.voucherid
			this.loadVoucher()
			this.setDefaultDate()
		},
		onShow() {

		},
		methods: {

			setDefaultDate() {
				setTimeout(() => {
					this.$refs.selectDateRef.confirm()
				}, 30)
			},
			loadVoucher() {
				return this.$u.api
					.postFindVaildVoucherList({
						page: 1,
						rows: 999
					}).then(res => {
						try {
							this.voucherData = res.data.rows.find(item => item.voucherid == this.voucherid)
							this.orderInfo.voucherCode = this.voucherData.vouchercode
						} catch (err) {}

						this.$store.commit('setVoucherNum', res.data.total)
					})
			},
			selectAddress(type) {
				this.$refs.selectAddressListRef.openModal({
					type
				})
			},
			confirmAddress(addressData) {
				const {
					type,
					mobile,
					realName,
					address,
					areaName,
					cityName,
					provinceName
				} = addressData
				if (type == 1) {
					this.orderInfo.takeCounty = areaName
					this.orderInfo.takeCity = cityName
					this.orderInfo.takeProvince = provinceName
					this.orderInfo.takeAddress = address
					this.orderInfo.takeMan = realName
					this.orderInfo.takePhone = mobile
				} else {
					this.orderInfo.backCounty = areaName
					this.orderInfo.backCity = cityName
					this.orderInfo.backProvince = provinceName
					this.orderInfo.backAddress = address
					this.orderInfo.backMan = realName
					this.orderInfo.backPhone = mobile
				}
				this.orderInfo = {
					...this.orderInfo
				}
			},
			selectDate() {
				this.$refs.selectDateRef.openModal()
			},
			dateConfirm(val) {
				this.orderInfo.takePreTime = val.text
				this.orderInfo.takePreTimeStart = val.start
				this.orderInfo.takePreTimeEnd = val.end
				this.orderInfo = {
					...this.orderInfo
				}
			},
			confirmHandle() {
				console.log(this.canSubmit, 'canSubmit')
				console.log(this.$u.api
					.postWriteOffVoucherList)
				if (!this.canSubmit) {
					this.$refs.uToast.show({
						title: '请输入完整信息'
					});
					return
				}
				this.$u.api
					.postWriteOffVoucherList(this.orderInfo)
					.then(res => {
						this.loadVoucher().then(() => {
							uni.switchTab({
								url: '/pages/order/order'
							})
						})

					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-order-voucher {
		display: flex;
		padding: 30rpx;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx;
		border-bottom: solid 1rpx #f0f0f0;
		font-size: 34rpx;
		font-weight: 900;

		&-text {
			flex: 1;
			padding-left: 20rpx;
			font-size: 32rpx;
		}
	}

	.home-address {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 40rpx;
		margin: 0 auto;
	}

	.select-item {
		margin-bottom: 56rpx;
		display: flex;
		align-items: center;

		&-recive {
			margin-bottom: 0;
		}
	}

	.select-text {
		margin: 0 20rpx;
		flex: 1;

		&-title {
			font-size: 32rpx;
			display: -webkit-box !important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical !important;
		}

		&-desc {
			margin-top: 8rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	.select-icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 90rpx;
		box-sizing: border-box;

		&-send {
			color: #fff;
			background-color: #3D9C9A
		}

		&-recive {
			color: #3D9C9A;
			background-color: #fff;
			border: solid #3D9C9A 1rpx;
		}
	}



	.confirm-order-time {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		padding: 30rpx 40rpx;

		&-title {
			color: #222
		}

		&-desc {
			color: #999;
			display: flex;
		}
	}

	.confirm-order-footer {
		position: fixed;
		bottom: 30rpx;
		left: 15vw;
		width: 70vw;
		height: 90rpx;
		background-color: #3D9C9A;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		border-radius: 45rpx;
	}
</style>